<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 48
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="score-query-icon"
  >
    <defs>
      <linearGradient id="scoreGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#00f2fe;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#4facfe;stop-opacity:1" />
      </linearGradient>
    </defs>

    <!-- 柱状图背景 -->
    <rect x="8" y="8" width="48" height="48" rx="6" fill="url(#scoreGrad)" opacity="0.2"/>

    <!-- 柱状图 -->
    <rect x="14" y="32" width="8" height="20" rx="2" fill="url(#scoreGrad)"/>
    <rect x="26" y="24" width="8" height="28" rx="2" fill="url(#scoreGrad)"/>
    <rect x="38" y="18" width="8" height="34" rx="2" fill="url(#scoreGrad)"/>

    <!-- 上升箭头 -->
    <path d="M50 20 L54 24 L50 28" stroke="url(#scoreGrad)" stroke-width="2" fill="none" stroke-linecap="round"/>
    <line x1="46" y1="24" x2="54" y2="24" stroke="url(#scoreGrad)" stroke-width="2" stroke-linecap="round"/>

    <!-- 底部基线 -->
    <line x1="12" y1="52" x2="48" y2="52" stroke="url(#scoreGrad)" stroke-width="2" stroke-linecap="round"/>
  </svg>
</template>

<style scoped>
.score-query-icon {
  transition: all 0.3s ease;
}

.score-query-icon:hover {
  transform: scale(1.1) translateY(-3px);
}
</style>
